<template>
  <div>
    <!-- 搜索框 -->
    <el-input
      v-model="searchKeyword"
      placeholder="请输入关键字搜索"
      style="width: 300px; margin-bottom: 20px;"
      @input="handleSearch"
    />
    <!-- 新增学生按钮 -->
    <el-button type="primary" @click="handleAddData" style="margin-bottom: 20px;">
      新增学生
    </el-button>
    <!-- 表格 -->
    <el-table :data="students" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="major" label="专业"></el-table-column>
      <el-table-column prop="classname" label="班级"></el-table-column>
      <el-table-column prop="dorm" label="宿舍"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增学生弹窗 -->
    <el-dialog :title="dialogTitle" v-model="addDataDialogVisible" @close="resetAddForm">
      <el-form :model="addFormData" status-icon @submit.prevent="handleAddSubmit">
        <el-form-item
          label="姓名"
          prop="name"
          :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
        >
          <el-input v-model="addFormData.name"></el-input>
        </el-form-item>
        <el-form-item
          label="年龄"
          prop="age"
          :rules="[{ required: true, message: '请输入年龄', trigger: 'blur' }]"
        >
          <el-input-number v-model="addFormData.age" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item
          label="性别"
          prop="sex"
          :rules="[{ required: true, message: '请输入性别', trigger: 'blur' }]"
        >
          <el-input v-model="addFormData.sex"></el-input>
        </el-form-item>
        <el-form-item
          label="专业"
          prop="major"
          :rules="[{ required: true, message: '请输入专业', trigger: 'blur' }]"
        >
          <el-input v-model="addFormData.major"></el-input>
        </el-form-item>
        <el-form-item
          label="班级"
          prop="classname"
          :rules="[{ required: true, message: '请输入班级', trigger: 'blur' }]"
        >
          <el-input v-model="addFormData.classname"></el-input>
        </el-form-item>
        <el-form-item
          label="宿舍"
          prop="dorm"
          :rules="[{ required: true, message: '请输入宿舍', trigger: 'blur' }]"
        >
          <el-input v-model="addFormData.dorm"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDataDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑学生弹窗 -->
    <el-dialog :title="dialogTitle" v-model="editDataDialogVisible" @close="resetEditForm">
      <el-form :model="editFormData" status-icon @submit.prevent="handleEditSubmit">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="editFormData.age" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="editFormData.sex"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="editFormData.major"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="classname">
          <el-input v-model="editFormData.classname"></el-input>
        </el-form-item>
        <el-form-item label="宿舍" prop="dorm">
          <el-input v-model="editFormData.dorm"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDataDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';

// 数据相关变量
const students = ref([]);
const searchKeyword = ref(''); // 搜索关键字

// 弹窗相关变量
const addDataDialogVisible = ref(false);
const editDataDialogVisible = ref(false);
const addFormData = ref({
  name: '',
  age: 0,
  sex: '',
  major: '',
  classname: '',
  dorm: '',
});
const editFormData = ref({});
const dialogTitle = ref('新增学生');

// 加载学生数据
onMounted(() => {
  getStudents();
});

// 获取所有学生
function getStudents() {
  axios
    .get('http://localhost:8080/user/getstudents')
    .then((response) => {
      students.value = response.data;
    })
    .catch((error) => {
      console.error('Error fetching students: ', error);
    });
}

// 搜索学生
function handleSearch() {
  if (searchKeyword.value.trim() === '') {
    getStudents(); // 如果搜索框为空，加载所有学生
  } else {
    axios
      .get('http://localhost:8080/user/searchStudents', {
        params: { keyword: searchKeyword.value },
      })
      .then((response) => {
        students.value = response.data; // 将搜索结果赋值给 students
      })
      .catch((error) => {
        console.error('Error searching students: ', error);
      });
  }
}

// 新增学生相关逻辑
function handleAddData() {
  dialogTitle.value = '新增学生';
  addDataDialogVisible.value = true;
  resetAddForm();
}

function resetAddForm() {
  addFormData.value = {
    name: '',
    age: 0,
    sex: '',
    major: '',
    classname: '',
    dorm: '',
  };
}

function handleAddSubmit() {
  axios
    .post('http://localhost:8080/user/addstudent', addFormData.value)
    .then(() => {
      addDataDialogVisible.value = false;
      getStudents(); // 重新加载学生数据
    })
    .catch((error) => {
      console.error('Error adding student: ', error);
    });
}

// 编辑学生相关逻辑
function handleEdit(row) {
  dialogTitle.value = '编辑学生';
  editFormData.value = { ...row };
  editDataDialogVisible.value = true;
}

function handleEditSubmit() {
  axios
    .put('http://localhost:8080/user/updatestudent', editFormData.value)
    .then(() => {
      editDataDialogVisible.value = false;
      getStudents(); // 重新加载学生数据
    })
    .catch((error) => {
      console.error('Error updating student: ', error);
    });
}

function resetEditForm() {
  editFormData.value = {
    name: '',
    age: 0,
    sex: '',
    major: '',
    classname: '',
    dorm: '',
  };
}

// 删除学生
function handleDelete(row) {
  axios
    .delete(`http://localhost:8080/user/deletestudent/${row.id}`) 
    .then(() => {
      getStudents(); // 重新加载学生数据
    })
    .catch((error) => {
      console.error('Error deleting student: ', error);
    });
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>